<template>
    <div class="editShopCont" :style="'min-height: '+docheight+'px'">
        <div v-if="!showTimeOut">
            
            <div class="formCont">
                <div class="formItem noflex">
                    <div class="fullList">
                        <div class="addTip">年费超级会员设置</div>
                        <div class="fullItem">
                            <div class="fullName">SVIP费用</div>
                            <div class="fullCont">
                                <van-field placeholder="请输入年费SVIP费用" v-model="vipData.shop_membership_fee" type="digit" />
                            </div>
                            <div>元</div>
                        </div>
                        <div class="fullItem">
                            <div class="fullName">会员折扣</div>
                            <div class="fullCont">
                                <van-field placeholder="请输入SVIP享受的折扣" v-model="vipData.member_discount" type="digit" />
                            </div>
                        </div>
                    </div>
                    <div class="formDes">*超级会员期限为一年。</div>
                    <div class="formDes">*SVIP费用设置为0，代表不开启会员充值系统。</div>
                    <div class="formDes">*折扣数为（会员折扣/100）;例如：95为9.5折。</div>
                </div>
            </div>
            <div class="formCont">
                <div class="formItem noflex">
                    <div class="fullList">
                        <div class="addTip">外卖配送相关设置</div>
                        <div class="fullItem">
                            <div class="fullName">配送费</div>
                            <div class="fullCont">
                                <van-field placeholder="请输入外卖配送费" v-model="vipData.delivery_fee" type="digit" />
                            </div>
                            <div>元</div>
                        </div>
                        <div class="fullItem">
                            <div class="fullName">外卖起送</div>
                            <div class="fullCont">
                                <van-field placeholder="请输入外卖最低起送金额" v-model="vipData.start_delivery_fee" type="digit" />
                            </div>
                            <div>元起送</div>
                        </div>
                    </div>
                </div>
            </div>
            <save-btn @saveClick="saveFn" value="保存设置"></save-btn>
        </div>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
        <sub-load v-if="showLoad"></sub-load>
        <getLoad v-if="!showCont"></getLoad>
        <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
    import {Toast } from 'vux' 
    import saveBtn from '@/components/public/saveBtn.vue'
    import subLoad from '@/components/public/subLoad.vue'
    import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    import {memberShow,memberSet} from '@/http/api'

    export default {
      components: {getLoad,getTimeOut,subLoad,Toast,saveBtn},
      data() {
        return {
            showTimeOut: false,
            showCont:true,
            showLoad:false,
            showText:'',
            showToast:false,
            showTime:false,
            memberTime:'年费超级会员',
            vipData:{
                shop_membership_fee:'',
                member_discount:'',
                delivery_fee:'',
                start_delivery_fee:'',
            },

        }
      },
      props: {},
      methods:{
        saveFn(){
            let data = this.vipData
            memberSet(data).then((res)=>{
                if(res.data.code==1){
                    this.showToast = true
                    this.showText = res.data.msg
                }else{
                    this.showToast = true
                    this.showText = '数据请求失败'
                }
            })
        },        
        getData(){
            let data ={}
            memberShow(data).then((res)=>{
                if(res.data.code==1){
                    this.vipData = res.data.data
                }else{
                    this.showToast = true
                    this.showText = '数据请求失败'
                }
                this.showCont= true
            }).catch(()=>{
          this.showTimeOut = true
          this.showCont= true
        })
        },
      },
      mounted(){
        
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .editShopCont{
    width: 100%;
    padding-top: 0.75rem;
    background-color: #f9f1f1;
    padding-bottom: 1rem;
    box-sizing: border-box;
    
    .formCont{
        width: 92%;
        margin: 0 auto;
        padding: 1rem 4%;
        border-radius: 0.25rem;
        background-color: #fff;
        box-sizing: border-box;
        margin-bottom: 0.75rem;
        .formItem{
            padding: 0.25rem 0;
            width: 100%;
            display: flex;
            position: relative;
            .formName{
                width: 4rem;
                font-size: 0.7rem;
                color: #646566;
                margin-right: 0.75rem;
                box-sizing: border-box;
            }
            .formInput{
                flex: 1;
                width: 2rem;
            }
            .fullList{
                .addTip{
                    font-weight: bold;
                    margin-bottom: 0.75rem;
                }
                .buyNavCont{
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    padding-top: 0.75rem;
                    .buyItem{
                        width: 31%;
                        text-align: center;
                        background-color: #f9f1f1;
                        margin-left: 3.5%;
                        margin-bottom: 0.75rem;
                        padding: 0.75rem 0;
                        border-radius: 0.25rem;
                        overflow: hidden;
                        position: relative;
                        .iconfont{
                            position: absolute;
                            right: 0rem;
                            top: 0rem;
                            // border: 2px solid #fff;
                            width: 1.2rem;
                            height: 1.2rem;
                            text-align: center;
                            font-size: 0.8rem;
                            border-radius: 0 0 0 0.25rem;
                            text-align: center;
                            line-height: 1.2rem;
                            color: #fff;
                            background-color: #000;
                        }
                        .buyImg{
                            width: 100%;
                            text-align: center;
                            img{
                                width: 1.5rem;
                            }
                        }
                        .buyMoney{
                            margin: 0.25rem 0;
                            font-size: 1.2rem;
                        }
                        .buyMoneyDes{
                            font-size: 0.6rem;
                            color: #e95551;
                        }
                    }
                    .noLeft{
                        margin-left: 0;
                    }
                }
                .fullItem{
                    display: flex;
                    width: 100%;
                    align-items: center;
                    padding-bottom: 1rem;
                    position: relative;
                    .formTip{
                        position: absolute;
                        left: 4.75rem;
                        top: 2.25rem;
                        font-size: 0.6rem;
                        color: rgb(234, 78, 98);
                    }
                    .fullName{
                        width: 4rem;
                        color: #646566;
                        margin-right: 0.75rem;
                        font-size: 0.7rem;
                    }
                    .fullCont{
                        display: flex;
                        align-items: center;
                        width: 5rem;
                        flex: 1;
                    }
                }
                .formTip{
                    color: #ff2d2d;
                    font-size: 0.6rem;
                }
            }
            .formDes{
                color: #999;
                font-size: 0.6rem;
            }
            .listAddBtn{
                display: flex;
                margin-top: 0.5rem;
                justify-content: flex-end;
            }
        }
        .hasMargin{
            margin-top: 1rem;
        }
        .noBorder{
            border-bottom: none;
        }
        .noflex{
            display: block;
        }
        .flexCenter{
            align-items: center;
        }
    }
  }
  </style>
<style>
.van-field__label{
    width:4rem;
}
.formCont .van-cell{
    padding: 0.5rem 0;
}
.van-cell::after{
    border-bottom: none !important;
}
</style>
  

<style>
.formPhone .van-field__label{
    line-height: 33px;
}
</style>